<template>

  <div ref="container" class="container">{{ content }}</div>
  <input type="text" ref="username" name="" id="">
  <button @click="gteElementHandle">获取元素</button>
</template>
<script>
// 内容改变 ：{ { 模版语法 } }
// 属性改变：v - bind：指令
// 事件： v-on:click

// 如果没有特别需求 不要操作Dom

export default {
  data() {
    return {
      content: "内容"
    }
  }
  , methods: {
    gteElementHandle() {
      // innerHTML :JS原生写法
      this.$refs.container.innerHTML = 'hhh'
      console.log(this.$refs.username.value)

    }
  }
}
</script>